<template>
  <view class="editor-content-container">
    <!-- 日志列表 -->
    <view 
      v-for="diary in processedDiaries" 
      :key="diary.id"
      class="diary-item"
      @click="handleEdit(diary)"
    >
      <!-- 富文本内容（显示前10字） -->
      <rich-text 
        :nodes="parseContent(diary.content)" 
        class="rich-text-content"
      />
    
      <!-- 图片预览 -->
      <view v-if="diary.images.length > 0" class="image-preview-container">
        <view 
          v-for="(img, index) in diary.images" 
          :key="index" 
          class="image-wrapper"
          @click.stop="previewImage(diary.images, index)"
        >
          <image :src="processImagePath(img)" mode="aspectFill" class="content-image"/>
        </view>
      </view>
    
      <!-- 时间戳（使用dayjs格式化） -->
      <text class="timestamp">
        {{ formatDateTime(diary.createdAt) }}
        <text v-if="showEditedIndicator(diary)">（已编辑）</text>
      </text>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
  diaries: {
    type: Array,
    default: () => [],
    validator: value => Array.isArray(value) && value.every(d => d.id)
  }
})

const emit = defineEmits(['edit', 'preview-image'])

// 处理后的日志数据
const processedDiaries = computed(() => {
  return props.diaries.map(diary => ({
    ...diary,
    images: Array.isArray(diary.images) ? diary.images : [],
    // 统一时间格式
    createdAt: dayjs(diary.createdAt).isValid() ? diary.createdAt : dayjs().toISOString(),
    updatedAt: dayjs(diary.updatedAt).isValid() ? diary.updatedAt : diary.createdAt
  }))
})

// 图片路径处理
const processImagePath = (img) => {
  return img?.startsWith('_www/') ? `/static/${img}` : img
}

// 使用dayjs格式化日期时间
const formatDateTime = (dateString) => {
  return dayjs(dateString).isValid() 
    ? dayjs(dateString).format('MM/DD HH:mm')
    : '--/-- --:--'
}

// 显示编辑指示器
const showEditedIndicator = (diary) => {
  return dayjs(diary.updatedAt).isAfter(dayjs(diary.createdAt))
}

// 富文本解析（安全过滤+内容截断）
const parseContent = (content) => {
  if (!content) return []

  // 安全过滤并保留基本格式
  const safeContent = content
    .replace(/<script.*?<\/script>/gi, '')
    .replace(/<[^>]+>/g, '')
    .replace(/\s+/g, ' ')
    .trim()

  // 截断处理（10个字符+...）
  const truncated = safeContent.length > 10 
    ? `${safeContent.slice(0, 10)}...`
    : safeContent

  return [{
    type: 'node',
    name: 'div',
    attrs: { class: 'rich-content' },
    children: [{
      type: 'text',
      text: truncated
    }]
  }]
}

// 图片预览事件
const previewImage = (images, index) => {
  emit('preview-image', {
    images: images.map(processImagePath),
    index
  })
}

// 编辑事件
const handleEdit = (diary) => {
  emit('edit', diary.id)
}
</script>

<style scoped lang="scss">
.editor-content-container {
  padding: 0 8px;
}

.diary-item {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(135, 206, 235, 0.1);
  transition: transform 0.2s;
  overflow: hidden;

  &:active {
    transform: scale(0.98);
  }
}

.rich-text-content {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-preview-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.image-wrapper {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(0,0,0,0.05);
  }
}

.content-image {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

.timestamp {
  font-size: 12px;
  color: #999;
  text-align: right;
  margin-top: 8px;
  display: block;
}
</style>